// 小仓库:layout组件相关配置仓库
import { defineStore } from 'pinia'

// 主题类型枚举
export const SidebarTheme = {
  Light: 'light',
  Dark: 'dark'
}

export const DEFAULT_COLOR = '#409eff'

export const useLayOutSettingStore = defineStore('SettingStore', {
  state: () => ({
    // 控制菜单折叠状态
    fold: false,
    // 用于触发页面刷新
    refresh: false,
    // 侧边栏主题 - 从本地存储恢复
    sidebarTheme: localStorage.getItem('sidebarTheme') || SidebarTheme.Dark,
    // 主题颜色 - 从本地存储恢复
    themeColor: localStorage.getItem('themeColor') || DEFAULT_COLOR,
  }),
  getters: {
    // 侧边栏是否为暗色主题
    sideBarIsDark: (state) => state.sidebarTheme === SidebarTheme.Dark,
    // 获取主题颜色
    getThemeColor: (state) => state.themeColor,
  },
  actions: {
    // 设置侧边栏主题色
    setSideBarTheme(theme) {
      this.sidebarTheme = theme
      localStorage.setItem('sidebarTheme', theme)
    },
    // 设置系统主题色
    setThemeColor(color) {
      this.themeColor = color
      localStorage.setItem('themeColor', color)
    },
  },
})

export default useLayOutSettingStore

